<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
          height: 50px;
          position: relative; /*通栏导航相对定位元素*/
          display: flex;
          background-color: skyblue;
        }
        .container .item {
          padding: 0px 20px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .item-content {
          width: 100%;
          min-height: 100px;
          border: 1px solid rgba(0, 0, 0, 0.3);
          border-top-width: 0;
          background: pink;
          margin-top: -1px;
          position: absolute; /*绝对定位-相对于最外层的.container*/
          left: 0px;
          top: 100%;
          box-sizing: border-box;
          z-index: 9999;
          display: none;
        }
        .item:hover {
          background-color: pink;
        }
        /*鼠标滑动显示超大菜单内容*/
        .item:hover .item-content {
          display: block;
        }
      </style>
</head>
<body>
    <div class="container">
        <div class="item">菜单1</div>
        <div class="item">菜单2</div>
        <div class="item">
          菜单3
          <div class="item-content">通栏二级菜单</div>
        </div>
        <div class="item">菜单4</div>
      </div>
</body>
</html>